<template>
  <div style="padding: 20px">
    <div style="display: flex; align-items: center; justify-content: space-between">
      <div style="font-size: 25px; color: black">我的地址</div>
      <div>
        <el-button size="small" type="primary" @click="toAdd" style="margin-left: 20px"> 添加地址 </el-button>
      </div>
    </div>
    <!-- 地址列表 -->
    <div style="margin-top: 20px">
      <div
        v-for="(item, index) in addressList"
        :key="item.id"
        class="depot-item"
        :class="{ active: item.id === address.id }"
        @click="select(item)"
        style="margin-bottom: 15px; background-color: #f7f7f7; cursor: pointer"
      >
        <div class="ok-box-flex">
          <div class="depotFont" style="padding: 10px; width: 100%; display: flex">
            <div style="width: 5px">
              <el-tag type="info" size="small">{{ index + 1 }}</el-tag>
            </div>
            <div style="margin-left: 20px; display: flex">
              <div style="margin-left: 5px">
                <div style="display: flex">
                  <div style="width: 90px">
                    <el-icon><UserFilled /></el-icon>
                    {{ item.name }}
                  </div>
                  <div style="margin-left: 20px; width: 200px">
                    <el-icon><Iphone /></el-icon>
                    {{ item.phone }}
                  </div>
                </div>
                <div style="display: flex; align-items: center; margin-top: 20px">
                  <el-icon><House /></el-icon>
                  {{ item.address }}
                  <el-icon class="delete-icon" style="color: #727272; margin-left: 10px" @click.stop="del(item)">
                    <Delete />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="add">
      <el-dialog title="添加地址" v-model="dialog" append-to-body>
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="'100px'">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="'100px'">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" :label-width="'100px'">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <template v-slot:footer>
          <div class="dialog-footer">
            <el-button @click="dialog = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import { deleteAddress, getAddressList, saveAddress } from '@/api/userAddress';
import type { addressInfo } from '@/types';
import { ElNotification } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
const dialog = ref(false);
const addressList = ref<addressInfo[]>([]);
const address = reactive({
  id: '',
  name: '',
  phone: '',
  address: '',
});
const originalForm = {
  name: '',
  phone: '',
  address: '',
};
const form = reactive({
  ...originalForm,
});

const getList = () => {
  getAddressList().then((res) => {
    addressList.value = res.result;
  });
};

const add = () => {
  saveAddress(form).then((res) => {
    getList();
    dialog.value = false;
    ElNotification({
      type: 'success',
      title: '我的地址',
      message: '添加成功',
    });
  });
};
const del = (item: any) => {
  deleteAddress(item.id).then((res) => {
    getList();
    ElNotification({
      type: 'success',
      title: '我的地址',
      message: '删除成功',
    });
  });
};
const select = (item: any) => {
  address.id = item.id;
  address.name = item.name;
  address.phone = item.phone;
  address.address = item.address;
};
const toAdd = () => {
  dialog.value = true;
};

onMounted(() => {
  Object.assign(form, originalForm);
  getList();
});
</script>
<style scoped>
:deep(.add .el-dialog__wrapper) {
  z-index: 90000000;
}
.depot-item {
  /* 初始状态样式 */
  border: 1px solid transparent;
  border-radius: 3px;
  transition: border-color 0.3s ease-in-out; /* 添加过渡效果 */
  /* 设置可点击样式，可根据需要自定义 */
  cursor: pointer;
}

.depot-item:hover {
  border-color: rgb(9, 109, 217);
}

.depotFont {
  transition: border-color 0.3s ease-in-out; /* 添加过渡效果 */
  /* 设置可点击样式，可根据需要自定义 */
  cursor: pointer;
}

.depotFont:hover {
  color: #2d6cd3;
}

.active {
  border-color: rgb(9, 109, 217);
  color: #2d6cd3;
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 20px;
  padding-left: 30px;
  background-color: #eeeeee;
}
</style>
